{% extends "base.html" %}
{% block title %}查询图书信息{% endblock %}

{% block card %}
    <div class="layui-card-header"><h2>查询图书信息</h2></div>{% endblock %}
{% block body %}
    <form class="layui-form" method="post" id="searchForm">
        {{ form.csrf_token }}
        <div class="layui-form-item">
            <div class="layui-inline">
                <div class="layui-row layui-col-space10">
                    <div class="layui-col-md4">
                        {{ form.method(class="layui-input-inline") }}
                    </div>
                    <div class="layui-col-md6">
                        <label class="layui-form-label">查询内容：</label>
                        <div class="layui-input-inline">
                            {{ form.content(class="layui-input",style="width:250px") }}
                        </div>
                    </div>
                    <div class="layui-col-md2">
                        <div class="layui-input-inline">
                            {{ form.submit(class="layui-btn", id="search") }}
                            <button class="layui-btn" id="all">所有</button>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </form>
    <div id="remove">
        <table lay-even id="result" lay-filter="re">
            <thead>
            <tr>
                <th lay-data="{field:'isbn', width:140}">ISBN</th>
                <th lay-data="{field:'book_name', width:200}">书名</th>
                <th lay-data="{field:'press', width:180}">出版社</th>
                <th lay-data="{field:'author', width:140}">作者</th>
                <th lay-data="{field:'class_name', width:200}">类别</th>
                <th lay-data="{field:'count', width:120}">馆藏数量</th>
                <th lay-data="{field:'available'}">可借数量</th>
            </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>
    <table id="test" lay-filter="test"></table>

{% endblock %}

{% block script %}
    <script>
        layui.use(['form', 'table', 'jquery'], function () {
            var form = layui.form;
            var table = layui.table;
            var $ = layui.$;

            table.init('re', {
                height: 390
                , limit: 7
                , page: true
            });

            $(document).ready(function () {
                $('#search').on('click', function () {
                    var form = new FormData(document.getElementById("searchForm"));
                    if ($('#content').val() === "") {
                        layui.use('layer', function () {
                            var layer = layui.layer;

                            layer.msg('请填写查询内容', {time: 800});
                        });
                    } else {
                        $.ajax({
                            url: "{{ url_for('book.find_book') }}",
                            type: "post",
                            data: form,
                            processData: false,
                            contentType: false,
                            success: function (data) {
                                if (data.length !== 0) {
                                    $('#remove').remove();
                                    table.render({
                                        elem: '#test'
                                        , data: data
                                        , cols: [[
                                            {field: 'isbn', title: 'ISBN', width: 140}
                                            , {field: 'book_name', title: '书名', width: 200}
                                            , {field: 'press', title: '出版社', width: 180}
                                            , {field: 'author', title: '作者', width: 140}
                                            , {field: 'class_name', title: '类别', width: 150}
                                            , {field: 'location', title: '位置', width: 150}
                                            , {field: 'count', title: '馆藏数量', width: 120}
                                            , {field: 'available', title: '可借数量'}
                                        ]]
                                        , page: true
                                        , height: 390
                                        , limit: 7
                                        , response: {
                                            statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
                                        }
                                        , parseData: function (data) { //将原始数据解析成 table 组件所规定的数据
                                            return {
                                                "code": data.status, //解析接口状态
                                                "msg": data.message, //解析提示文本
                                                "count": data.total, //解析数据长度
                                                "data": data.rows.item //解析数据列表
                                            };
                                        }
                                    });
                                } else {
                                    layui.use('layer', function () {
                                        var layer = layui.layer;
                                        {#table.reset({})#}
                                        layer.msg('未找到任何结果', {time: 1000});
                                    });
                                }
                            }
                        });
                    }
                    return false;
                })
                $('#all').on('click', function () {
                    var form = new FormData(document.getElementById("searchForm"));
                    $.ajax({
                        url: "{{ url_for('book.find_book') }}",
                        type: "get",
                        processData: false,
                        contentType: false,
                        success: function (data) {
                            if (data.length !== 0) {
                                $('#remove').remove();
                                table.render({
                                    elem: '#test'
                                    , data: data
                                    , cols: [[
                                        {field: 'isbn', title: 'ISBN', width: 140}
                                        , {field: 'book_name', title: '书名', width: 200}
                                        , {field: 'press', title: '出版社', width: 180}
                                        , {field: 'author', title: '作者', width: 140}
                                        , {field: 'class_name', title: '类别', width: 150}
                                        , {field: 'location', title: '位置', width: 150}
                                        , {field: 'count', title: '馆藏数量', width: 120}
                                        , {field: 'available', title: '可借数量'}
                                    ]]
                                    , page: true
                                    , height: 390
                                    , limit: 7
                                    , response: {
                                        statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
                                    }
                                    , parseData: function (data) { //将原始数据解析成 table 组件所规定的数据
                                        return {
                                            "code": data.status, //解析接口状态
                                            "msg": data.message, //解析提示文本
                                            "count": data.total, //解析数据长度
                                            "data": data.rows.item //解析数据列表
                                        };
                                    }
                                });
                            } else {
                                layui.use('layer', function () {
                                    var layer = layui.layer;
                                    {#table.reset({})#}
                                    layer.msg('未找到任何结果', {time: 1000});
                                });
                            }
                        }
                    });
                    return false;
                })
            });

        });
    </script>
{% endblock %}

